Kurs XHTML - część szósta
Tabele
Dość często zdarza się, że na stronie należy umieścić dane tabelaryczne, na przykład tabelę kursów walut, czy prezentacjęwyników jakiegoś doświadczenia. W XHTML istnieje możliwość stworzenia tabeli, jednak jej kod, w przeciwieństwie do innych elementów strony, jest bardzo nieczytelny. Wynika to z faktycznej budowy tabelki, która przecież jest niczym innym jak komórkami połączonymi w wiersze i kolumny.
"Skład" tabeli
Całą zawartość tabeli należy ująć pomiędzy znaczniki <table> oraz </table>.
Tabele zawierają nagłówek (<thead>), stopkę (<tfoot>) oraz ciało (<tbody>). Jedną z ważnych zasad, które żądzą tabelami jest konieczność wystąpienia stopki tabeli przed jej ciałem - przeglądarka i tak wyświetli stopkę w jej prawidłowym miejscu. Chociaż rozróżnienie zawartości tabeli na bloki nagłówka, stopki i ciała jest opcjonalne lepiej jest używać chociażby samego oznaczenia ciała (<tbody>).
Tabela podzielona jest na wiersze (<tr>), a wiersze na komórki (<td>). Istnieje również specjalny typ komórki - komórka nagłówka (<th>).
Tabela może posiadać tytuł, który jest definiowany przy pomocy znaczników <caption> oraz </caption>. Dodatkowo można (a nawet powinno się) streścić tabelę przy pomocy parametru summary w znaczniku <table>.
Przykład prostej tabeli:
<table summary="Wyniki moich badań nad populacją mrówek">
<caption>Ilość zaobserwowanych mrówek w zależności od pory dnia
</caption>
<thead>
<tr><th>Pora dnia</th><th>Rano</th><th>Po południu</th><th>W nocy
</th></tr>
</thead>
<tfoot>
<tr><th>Średnio:</th><td>200</td><td>100</td><td>400</td></tr>
</tfoot>
<tbody>
<tr><th>Dzień 1</th><td>190</td><td>110</td><td>450</td></tr>
<tr><th>Dzień 2</th><td>200</td><td>90</td><td>350</td></tr>
<tr><th>Dzień 3</th><td>210</td><td>100</td><td>400</td></tr>
</tbody>
</table>
Powyższa tabela powinna zostać zaprezentowana w podobny sposób:
Ilość zaobserwowanych mrówek w zależności od pory dnia
| Pora dnia | Rano | Po południu | W nocy |
|---|
| Średnio: | 200 | 100 | 400 |
|---|
| Dzień 1 | 190 | 110 | 450 |
|---|
| Dzień 2 | 200 | 90 | 350 |
|---|
| Dzień 3 | 210 | 100 | 400 |
|---|
Jak zapewne zauważyliście, kod tabeli jest bardzo trudny do analizy. W takich tabelach jak ta powyżej, gdzie komórki zawierają mało znaków, należy solidnie wysilać wzrok, by móc oddzielić znaczniki od zawartości komórek.
Na koniec jeszcze jedna ważna uwaga: tabele nie służą do tworzenia layoutów stron!
--
[Krzysztof Sawicki ksawicki(a)post.pl http://www.antylameriada.boo.pl/]
[GSM 011000000000011000001000000000000111 JID: ksawicki(a)jabberpl.org]
[Dział Webmastering w @t http://www.at.w.pl/
Skierniewice, Poland]
|
